We’re using cookies, but you can turn them off in Privacy Settings. Otherwise, you are agreeing to our use of cookies. Accepting cookies does not mean that we are collecting personal data. Learn more in our Privacy Policy .

Homepage Components FY2021

CFA® charterholders are highly regarded throughout the investment industry because they measure up to a higher standard of ethics and professional excellence.

Find Out How

Homepage Hero

Code

HTML

<section class="grid-container layered-hero">
    <div class="section-background" style="background-image:url(/Content/src/img/examples/hero_stdtemplate.jpg);--bg-image:url(/Content/src/img/examples/hero_widetemplate.png);--mbg-image:url(/Content/src/img/examples/hero_widetemplate_mobile.png);"></div>
    <h1 class="section-title">Homepage Components</h1>
    <div class="section-content">
        <p class="section-description">CFA<sup>®</sup> charterholders are highly regarded throughout the investment industry because they measure up to a higher standard of ethics and professional excellence.</p>
        <p class="section-cta">
            <a href="#" class="button">Find Out How</a>
        </p>
    </div>
    <div class="section-asset" style="background-image:url(/Content/src/img/examples/testimonial-image.png);"></div>
</section>

Documentation

Problem Being Solved

We want to highlight something on the homepage as important.

When to Use

This hero component can only be added to the top of the homepage.

Formatting

This hero sits outside of the page's article element.

The background and foreground images are dynamic, so they must be set in the HTML with inline styling. In order to enable responsive, dynamic backgrounds, these rules must be added inline:

  • background-image: url("This should be the url to the full sized image to be used as a fallback");
  • --bg-image: url("This should be the url to the full sized image");
  • --mbg-image: url("This should be the url to the mobile sized image");

By setting the CSS variables inline, we can allow users to set the background images while still making use of background property rules in CSS. The foreground image is similar, but does not have a mobile version so it does not use the CSS variables.

Welcome to the CFA Institute Portal

Join our community of educated, ethical professionals and enhance your skills by participating in our educational offerings.

Alternate Hero

Code

HTML

<section class="grid-container hero--simple" style="--mbg-image:url(/Content/src/img/examples/hero_widetemplate_mobile.png);--bg-image:url(/Content/src/img/examples/hero_widetemplate.png);">
    <div class="section-content">
        <h1 class="section-title">Welcome to the CFA Institute Portal</h1>
        <p class="section-description">Join our community of educated, ethical professionals and enhance your skills by participating in our educational offerings.</p>
    </div>
</section>

Documentation

Problem Being Solved

We want to highlight something on the homepage as important.

When to Use

This hero component can only be added to the top of the homepage.

Formatting

This hero sits outside of the page's article element.

The background and foreground images are dynamic, so they must be set in the HTML with inline styling. In order to enable responsive, dynamic backgrounds, these rules must be added inline, this is required:

  • --bg-image: url("This should be the url to the full sized image");
  • --mbg-image: url("This should be the url to the mobile sized image");

By setting the CSS variables inline, we can allow users to set the background images while still making use of background property rules in CSS.

Call to Action (CTA) Tiles

Our Programs Learn About the Programs
CFA® Exams Enroll and Register for the CFA Exam
Membership Renew Your CFA Institute Membership

Code

HTML

<div class="grid-container edge-to-edge cta-tiles">
        <div class="cta-tile">
        <span class="label">Our Programs</span>
        <a href="#">Learn About the Programs</a>
    </div>
        <div class="cta-tile">
        <span class="label">CFA<sup>®</sup> Exams</span>
        <a href="#">Enroll and Register for the CFA Program Exam</a>
    </div>
        <div class="cta-tile">
        <span class="label">Membership</span>
        <a href="#">Renew Your CFA Institute Membership</a>
    </div>
</div>

Documentation

Problem Being Solved

We are trying to point out important links.

When to Use

This component should only be placed on the home page, immediately after the hero image.

Home Page Fact Box

Code

HTML

<div class="fact-box-set full-width">
    <aside class="fact-box">
        <dl>
            <dt class="fact-box-title">Fact Box Title</dt>
            <dd class="fact-box-stats">
                <div class="fact-box-stats-stat">100<span class="fact-box-stats-stat-node">+</span></div>
                <div class="fact-box-stats-label">LABEL</div>
                <div class="fact-box-stats-description">Fact box text goes here.</div>
            </dd>
        </dl>
    </aside>
    <aside class="fact-box">
        <dl>
            <dt class="fact-box-title">Fact Box Title</dt>
            <dd class="fact-box-stats">
                <div class="fact-box-stats-stat">00<span class="fact-box-stats-stat-node"></span></div>
                <div class="fact-box-stats-label">LABEL</div>
                <div class="fact-box-stats-description">Fact box text goes here.</div>
            </dd>
        </dl>
    </aside>
    <aside class="fact-box">
        <dl>
            <dt class="fact-box-title">Fact Box Title</dt>
            <dd class="fact-box-stats">
                <div class="fact-box-stats-stat">00<span class="fact-box-stats-stat-node"></span></div>
                <div class="fact-box-stats-label">LABEL</div>
                <div class="fact-box-stats-description">Fact box text goes here.</div>
            </dd>
        </dl>
    </aside>
    <aside class="fact-box">
        <dl>
            <dt class="fact-box-title">Fact Box Title</dt>
            <dd class="fact-box-stats">
                <div class="fact-box-stats-stat">00<span class="fact-box-stats-stat-node"></span></div>
                <div class="fact-box-stats-label">LABEL</div>
                <div class="fact-box-stats-description">Fact box text goes here.</div>
            </dd>
        </dl>
    </aside>
</div>

Documentation

Problem Being Solved

Certain statistics should be called out to show successes.

When to Use

This component can be used on any page, though when placed on the home page it will be style differently.

image example
Research & Analysis

Renew Your CFA Institute Membership

Coronavirus is having a major impact on public health and the global financial markets. CFA Institute is working to provide resources and to support the development of policy measures that address the functioning of markets and the financial system.

Code

HTML

<section class="grid-container full-width featured-content">
    <img class="image" src="/Content/src/img/examples/testimonial-image.png" alt="image example" />
    <span class="label">Research & Analysis</span>
    <p class="title"><a href="#">Renew Your CFA Institute Membership</a></p>
    <p class="short-description">Coronavirus is having a major impact on public health and the global financial markets. CFA Institute is working to provide resources and to support the development of policy measures that address the functioning of markets and the financial system.</p>
</section>

Documentation

Problem Being Solved

There is a particular article or piece of content we want to feature, so we add a much larger section to make it stand out.

When to Use

This component can only go on the homepage. To use the blue background, add the class "blue" to the containing section.

Top Articles

Take 15 Trust in the Era of Artificial Intelligence, Innovation, and Technology
Research Foundation ESG and Responsible Institutional Investing Around the World
Refresher Reading Private Company Valuation
Annual Conference The Enhanced Importance of Investing with Impact
full sized

Top Articles on Blue

Take 15 Trust in the Era of Artificial Intelligence, Innovation, and Technology
Research Foundation ESG and Responsible Institutional Investing Around the World
Refresher Reading Private Company Valuation
Annual Conference The Enhanced Importance of Investing with Impact
full sized

Top Articles on Plain

Take 15 Trust in the Era of Artificial Intelligence, Innovation, and Technology
Research Foundation ESG and Responsible Institutional Investing Around the World
Refresher Reading Private Company Valuation
Annual Conference The Enhanced Importance of Investing with Impact

Code

HTML

<div class="top-articles grid-container">
    <div class="top-article">
        <span class="label">Take 15</span>
        <a href="#" class="title">Trust in the Era of Artificial Intelligence, Innovation, and Technology</a>
    </div>

    <div class="top-article">
        <span class="label">Research Foundation</span>
        <a href="#" class="title">ESG and Responsible Institutional Investing Around the World</a>
    </div>

    <div class="top-article">
        <span class="label">Refresher Reading</span>
        <a href="#" class="title">Private Company Valuation</a>
    </div>

    <div class="top-article">
        <span class="label">Annual Conference</span>
        <a href="#" class="title">The Enhanced Importance of Investing with Impact</a>
    </div>

    <div class="top-article">
        <span class="label">Take 15</span>
        <a href="#" class="title">Trust in the Era of Artificial Intelligence, Innovation, and Technology</a>
    </div>

    <div class="top-article">
        <span class="label">Research Foundation</span>
        <a href="#" class="title">ESG and Responsible Institutional Investing Around the World</a>
    </div>

    <div class="top-article">
        <span class="label">Refresher Reading</span>
        <a href="#" class="title">Private Company Valuation</a>
    </div>
</div>

Documentation

Problem Being Solved

Recent articles may be of interest, so we want to call them out.

When to Use

This component can only be used on the homepage, and should be placed inside a standard section placeholder.

Side-by-Side

Example of side-by-side sections, each section is using brand card pattners.

Left Side

mountain

Type

Test Title for Demo

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.

19 Mar 2022

mountain

Type

Test Title for Demo

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.

19 Mar 2022

mountain

Type

Test Title for Demo

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.

19 Mar 2022

Right Side

mountain

Type

Test Title for Demo

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.

19 Mar 2022

mountain

Type

Test Title for Demo

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.

19 Mar 2022

Press Release Spotlight

27 May 2020 Over 12,000 Attend CFA Institute Virtual Annual Conference
18 May 2020 CFA Institute Member Survey Predicts Slow Economic Recovery
30 April 2020 University of Sydney Wins CFA Institute Research Challenge

Code

HTML

<div class="grid-container edge-to-edge press-tiles">
    <div class="press-tile">
        <span class="label">27 May 2020</span>
        <a href="#">Over 12,000 Attend CFA Institute Virtual Annual Conference</a>
    </div>
    <div class="press-tile">
        <span class="label">18 May 2020</span>
        <a href="#">CFA Institute Member Survey Predicts Slow Economic Recovery</a>
    </div>
    <div class="press-tile">
        <span class="label">30 April 2020</span>
        <a href="#">University of Sydney Wins CFA Institute Research Challenge</a>
    </div>
</div>

Documentation

Problem Being Solved

We are trying to point out recent press releases.

When to Use

This component should only be placed on the home page.

Professional Learning Resources

Stay competitive in the investment management industry with our collection of Professional Learning (PL) resources — including self-study and training, events, books, articles, webinars, podcasts, and more.

Browse Our Collection

Code

HTML

<div class="grid-container edge-to-edge footer-cta">
    <p class="title">Professional Learning Resources</p>
    <p class="description">
        Stay competitive in the investment management industry with our collection of Professional Learning (PL) resources — including self-study and training, events, books, articles, webinars, podcasts, and more.
    </p>
    <p class="cta">
        <a href="#" class="button">Browse Our Collection</a>
    </p>
</div>

Documentation

Problem Being Solved

The homepage has reached its end, and we have one more thing to show you.

When to Use

This component should only be placed on the home page.